<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>超市数据分析系统可视化大屏</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="api.js"></script>
    <script src="data-handler.js"></script>
    <style>
        body {
          margin: 0;
          padding: 0;
          background-color: #0e2a42;
          color: #fff;
          font-family: "微软雅黑", sans-serif;
          overflow: hidden;
        }

        .container {
          width: 1920px;
          height: 1080px;
          margin: 0 auto;
          position: relative;
          background: linear-gradient(to bottom, #0c1426, #1a2b4a);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

        .header {
          text-align: center;
          padding: 20px 0;
          border-bottom: 2px solid #2a5a8c;
        }

        .header h1 {
          margin: 0;
          font-size: 42px;
          letter-spacing: 3px;
          color: #4fc3f7;
          text-shadow: 0 0 10px rgba(79, 195, 247, 0.7);
        }

        .time-display {
          position: absolute;
          top: 20px;
          right: 20px;
          font-size: 20px;
          color: #bbdefb;
        }

        .tab-container {
          display: flex;
          justify-content: center;
          margin-bottom: 20px;
          gap: 20px;
        }

        .tab-button {
          background-color: rgba(42, 90, 140, 0.5);
          color: #bbdefb;
          border: none;
          padding: 12px 30px;
          font-size: 20px;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .tab-button:hover {
          background-color: rgba(79, 195, 247, 0.3);
          transform: scale(1.05);
        }

        .tab-button.active {
          background-color: #2a5a8c;
          color: white;
          box-shadow: 0 0 15px rgba(42, 90, 140, 0.8);
        }

        .tab-content {
          display: none;
          width: 100%;
          height: calc(100% - 180px);
        }

        .tab-content.active {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(4, 1fr);
          gap: 15px;
          padding: 20px;
        }

        .card {
          background-color: rgba(16, 42, 66, 0.7);
          border: 1px solid #2a5a8c;
          border-radius: 8px;
          padding: 15px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
          overflow: hidden;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
        }

        .card-title {
          font-size: 20px;
          margin-bottom: 15px;
          color: #4fc3f7;
          text-align: center;
          border-bottom: 1px solid #2a5a8c;
          padding-bottom: 8px;
        }

        .stat-number {
          font-size: 36px;
          font-weight: bold;
          text-align: center;
          color: #fff;
          margin: 20px 0;
        }

        .stat-label {
          text-align: center;
          color: #bbdefb;
          font-size: 16px;
        }

        .chart-container {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        canvas {
          width: 100%;
          height: 100%;
        }

        .footer {
          position: absolute;
          bottom: 0;
          width: 100%;
          text-align: center;
          padding: 10px 0;
          font-size: 16px;
          color: #90a4ae;
          background-color: rgba(14, 42, 66, 0.8);
          border-top: 1px solid #2a5a8c;
        }

        .grid-item-1 { grid-area: 1 / 1 / 2 / 2; }
        .grid-item-2 { grid-area: 1 / 2 / 2 / 3; }
        .grid-item-3 { grid-area: 1 / 3 / 2 / 4; }
        .grid-item-4 { grid-area: 1 / 4 / 2 / 5; }
        .grid-item-5 { grid-area: 2 / 1 / 3 / 3; }
        .grid-item-6 { grid-area: 2 / 3 / 3 / 5; }
        .grid-item-7 { grid-area: 3 / 1 / 4 / 3; }
        .grid-item-8 { grid-area: 3 / 3 / 4 / 5; }
        .grid-item-9 { grid-area: 4 / 1 / 5 / 5; }

        .list-container {
          height: 100%;
          overflow-y: auto;
          padding-right: 5px;
        }
        .list-container::-webkit-scrollbar {
          width: 6px;
        }
        .list-container::-webkit-scrollbar-thumb {
          background-color: #2a5a8c;
          border-radius: 3px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>超市数据分析系统</h1>
    </div>
    <div class="time-display" id="timeDisplay">2025-10-13 17:47:00</div>

    <div class="tab-container">
        <button class="tab-button active" onclick="switchTab('sales')">销售分析</button>
        <button class="tab-button" onclick="switchTab('member')">会员分析</button>
        <button class="tab-button" onclick="switchTab('store')">商店分析</button>
    </div>

    <div id="salesTab" class="tab-content active">
        <!-- 销售总额 -->
        <div class="card grid-item-1">
            <div class="card-title">今日销售总额</div>
            <div class="stat-number" id="totalSales">¥1,234,567</div>
            <div class="stat-label">与昨日相比 +5.2%</div>
        </div>

        <!-- 订单总数 -->
        <div class="card grid-item-2">
            <div class="card-title">今日订单总数</div>
            <div class="stat-number" id="totalOrders">3,456</div>
            <div class="stat-label">与昨日相比 +2.1%</div>
        </div>

        <!-- 客流量 -->
        <div class="card grid-item-3">
            <div class="card-title">今日客流量</div>
            <div class="stat-number" id="customerCount">2,134</div>
            <div class="stat-label">与昨日相比 -1.3%</div>
        </div>

        <!-- 平均客单价 -->
        <div class="card grid-item-4">
            <div class="card-title">平均客单价</div>
            <div class="stat-number" id="avgOrderValue">¥356.78</div>
            <div class="stat-label">较上周 +3.4%</div>
        </div>

        <!-- 热销商品分类 -->
        <div class="card grid-item-5">
            <div class="card-title">热销商品分类</div>
            <div class="chart-container">
                <canvas id="categoryChart"></canvas>
            </div>
        </div>

        <!-- 销售趋势 -->
        <div class="card grid-item-6">
            <div class="card-title">本周销售趋势</div>
            <div class="chart-container">
                <canvas id="trendChart"></canvas>
            </div>
        </div>

        <!-- 库存预警 -->
        <div class="card grid-item-7">
            <div class="card-title">库存预警</div>
            <div class="list-container">
                <ul style="padding-left: 20px;">
                    <li>苹果 (库存: 12)</li>
                    <li>牛奶 (库存: 8)</li>
                    <li>面包 (库存: 5)</li>
                    <li>鸡蛋 (库存: 15)</li>
                    <li>纸巾 (库存: 20)</li>
                </ul>
            </div>
        </div>

        <!-- 促销活动效果 -->
        <div class="card grid-item-8">
            <div class="card-title">促销活动效果</div>
            <div class="chart-container">
                <canvas id="promotionChart"></canvas>
            </div>
        </div>

        <!-- 实时销售 -->
        <div class="card grid-item-9">
            <div class="card-title">实时销售流水</div>
            <div class="list-container">
                <div style="padding: 8px 0; border-bottom: 1px solid #2a5a8c;">[17:45] 订单 #ORD202510131745001 - ¥234.50</div>
                <div style="padding: 8px 0; border-bottom: 1px solid #2a5a8c;">[17:43] 订单 #ORD202510131743002 - ¥128.90</div>
                <div style="padding: 8px 0; border-bottom: 1px solid #2a5a8c;">[17:42] 订单 #ORD202510131742003 - ¥56.00</div>
                <div style="padding: 8px 0; border-bottom: 1px solid #2a5a8c;">[17:40] 订单 #ORD202510131740004 - ¥89.99</div>
                <div style="padding: 8px 0; border-bottom: 1px solid #2a5a8c;">[17:38] 订单 #ORD202510131738005 - ¥156.75</div>
                <div style="padding: 8px 0; border-bottom: 1px solid #2a5a8c;">[17:36] 订单 #ORD202510131736006 - ¥320.00</div>
                <div style="padding: 8px 0; border-bottom: 1px solid #2a5a8c;">[17:35] 订单 #ORD202510131735007 - ¥78.45</div>
                <div style="padding: 8px 0; border-bottom: 1px solid #2a5a8c;">[17:33] 订单 #ORD202510131733008 - ¥189.90</div>
            </div>
        </div>
    </div>

    <div id="memberTab" class="tab-content">
        <!-- 会员总数 -->
        <div class="card grid-item-1">
            <div class="card-title">会员总数</div>
            <div class="stat-number" id="memberTotal">12,847</div>
            <div class="stat-label">本月新增 234 人</div>
        </div>

        <!-- 活跃会员数 -->
        <div class="card grid-item-2">
            <div class="card-title">活跃会员数</div>
            <div class="stat-number" id="activeMembers">8,921</div>
            <div class="stat-label">活跃率 69.4%</div>
        </div>

        <!-- 会员平均消费 -->
        <div class="card grid-item-3">
            <div class="card-title">会员平均消费</div>
            <div class="stat-number" id="avgMemberSpending">¥423.56</div>
            <div class="stat-label">高于非会员 32.1%</div>
        </div>

        <!-- 会员复购率 -->
        <div class="card grid-item-4">
            <div class="card-title">会员复购率</div>
            <div class="stat-number" id="repurchaseRate">67.8%</div>
            <div class="stat-label">较上月 +4.2%</div>
        </div>

        <!-- 会员等级分布 -->
        <div class="card grid-item-5">
            <div class="card-title">会员等级分布</div>
            <div class="chart-container">
                <canvas id="memberLevelChart"></canvas>
            </div>
        </div>

        <!-- 会员消费趋势 -->
        <div class="card grid-item-6">
            <div class="card-title">会员月度消费趋势</div>
            <div class="chart-container">
                <canvas id="memberTrendChart"></canvas>
            </div>
        </div>

        <!-- 高价值会员 -->
        <div class="card grid-item-7">
            <div class="card-title">高价值会员 Top 5</div>
            <div class="list-container">
                <ul style="padding-left: 20px;">
                    <li>VIP001 - 张三 - 累计消费 ¥120,000</li>
                    <li>VIP002 - 李四 - 累计消费 ¥98,500</li>
                    <li>VIP003 - 王五 - 累计消费 ¥87,200</li>
                    <li>VIP004 - 赵六 - 累计消费 ¥76,800</li>
                    <li>VIP005 - 钱七 - 累计消费 ¥65,400</li>
                </ul>
            </div>
        </div>

        <!-- 新会员转化率 -->
        <div class="card grid-item-8">
            <div class="card-title">新会员转化率</div>
            <div class="chart-container">
                <canvas id="newMemberChart"></canvas>
            </div>
        </div>

        <!-- 会员偏好分析 -->
        <div class="card grid-item-9">
            <div class="card-title">会员偏好分析</div>
            <div class="chart-container">
                <canvas id="preferenceChart"></canvas>
            </div>
        </div>
    </div>

    <div id="storeTab" class="tab-content">
        <!-- 门店总数 -->
        <div class="card grid-item-1">
            <div class="card-title">门店总数</div>
            <div class="stat-number" id="storeCount">24</div>
            <div class="stat-label">覆盖 8 个城市</div>
        </div>

        <!-- 营业中门店 -->
        <div class="card grid-item-2">
            <div class="card-title">营业中门店</div>
            <div class="stat-number" id="operatingStores">22</div>
            <div class="stat-label">2 家门店维护中</div>
        </div>

        <!-- 今日总客流 -->
        <div class="card grid-item-3">
            <div class="card-title">今日总客流</div>
            <div class="stat-number" id="overallTraffic">18,456</div>
            <div class="stat-label">较昨日 +3.2%</div>
        </div>

        <!-- 门店平均销售额 -->
        <div class="card grid-item-4">
            <div class="card-title">门店平均销售额</div>
            <div class="stat-number" id="avgStoreSales">¥51,440</div>
            <div class="stat-label">较上月 +2.8%</div>
        </div>

        <!-- 门店销售排名 -->
        <div class="card grid-item-5">
            <div class="card-title">门店销售排名 Top 5</div>
            <div class="chart-container">
                <canvas id="storeRankingChart"></canvas>
            </div>
        </div>

        <!-- 各店客流分布 -->
        <div class="card grid-item-6">
            <div class="card-title">各店客流分布</div>
            <div class="chart-container">
                <canvas id="storeTrafficChart"></canvas>
            </div>
        </div>

        <!-- 低效门店 -->
        <div class="card grid-item-7">
            <div class="card-title">低效门店预警</div>
            <div class="list-container">
                <ul style="padding-left: 20px;">
                    <li>朝阳店 - 日均销售额 ¥28,000</li>
                    <li>海淀店 - 日均销售额 ¥31,500</li>
                    <li>丰台店 - 日均销售额 ¥33,200</li>
                    <li>石景山店 - 日均销售额 ¥34,800</li>
                </ul>
            </div>
        </div>

        <!-- 门店坪效分析 -->
        <div class="card grid-item-8">
            <div class="card-title">门店坪效分析</div>
            <div class="chart-container">
                <canvas id="storeEfficiencyChart"></canvas>
            </div>
        </div>

        <!-- 门店库存周转 -->
        <div class="card grid-item-9">
            <div class="card-title">门店库存周转率</div>
            <div class="chart-container">
                <canvas id="inventoryTurnoverChart"></canvas>
            </div>
        </div>
    </div>

    <div class="footer">
        数据更新时间: 2025-10-13 17:47 &nbsp;&nbsp;|&nbsp;&nbsp; 数据来源: 超市管理系统
    </div>
</div>

<script>
    // 存储所有图表实例的全局对象
    const chartInstances = {};

    // 更新时间显示
    function updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      document.getElementById('timeDisplay').textContent = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
    setInterval(updateTime, 1000);
    updateTime(); // 初始调用

    // 切换标签页
    function switchTab(tabName) {
    // 隐藏所有内容
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
    });
    // 移除所有按钮的激活状态
    document.querySelectorAll('.tab-button').forEach(btn => {
        btn.classList.remove('active');
    });

    // 显示选中的内容
    document.getElementById(tabName + 'Tab').classList.add('active');
    event.target.classList.add('active');

    // 加载对应标签页的数据
    loadTabData(tabName);
    }
    // 加载标签页数据
    // 加载标签页数据
    async function loadTabData(tabName) {
    try {
        console.log(`开始加载${tabName}数据`);
        
        let data;
        if (tabName === 'sales') {
        data = await window.api.getSalesInfo();
        } else if (tabName === 'member') {
        data = await window.api.getMemberInfo();
        } else if (tabName === 'store') {
        data = await window.api.getStoreInfo();
        }
        
        console.log(`${tabName}数据:`, data);
        
        if (!data) {
        console.warn(`未获取到${tabName}数据，将使用默认数据`);
        return;
        }
        
        // 更新页面数据
        if (tabName === 'sales' && window.dataHandler.updateSalesData) {
        window.dataHandler.updateSalesData(data);
        } else if (tabName === 'member' && window.dataHandler.updateMemberData) {
        window.dataHandler.updateMemberData(data);
        } else if (tabName === 'store' && window.dataHandler.updateStoreData) {
        window.dataHandler.updateStoreData(data);
        }
        
        // 重新初始化图表以使用API数据
        if (tabName === 'sales') {
        // 先销毁旧图表
        destroyChart('categoryChart');
        destroyChart('trendChart');
        destroyChart('promotionChart');
        // 用API数据重新初始化
        initializeSalesCharts(data);
        } else if (tabName === 'member') {
        destroyChart('memberLevelChart');
        destroyChart('memberTrendChart');
        destroyChart('newMemberChart');
        destroyChart('preferenceChart');
        initializeMemberCharts(data);
        } else if (tabName === 'store') {
        destroyChart('storeRankingChart');
        destroyChart('storeTrafficChart');
        destroyChart('storeEfficiencyChart');
        destroyChart('inventoryTurnoverChart');
        initializeStoreCharts(data);
        }
        
        console.log(`${tabName}页面数据加载完成`);
    } catch (error) {
        console.error(`加载${tabName}数据失败:`, error);
        // 不显示alert，避免干扰用户体验
    }
    }
    // 销毁指定ID的图表实例
    function destroyChart(chartId) {
        if (chartInstances[chartId] && chartInstances[chartId].chart) {
            chartInstances[chartId].chart.destroy();
            chartInstances[chartId] = null;
        }
    }

    // 初始化销售图表
    function initializeSalesCharts(data = null) {
        // 销毁旧图表实例
        destroyChart('categoryChart');
        destroyChart('trendChart');
        destroyChart('promotionChart');

        // 使用提供的数据或默认数据
        const hotCategories = data ? data.hotCategories : [
            {name: "食品", value: 35}, {name: "饮料", value: 25}, 
            {name: "日用品", value: 20}, {name: "生鲜", value: 15}, 
            {name: "其他", value: 5}
        ];
        
        const weeklyTrend = data ? data.weeklyTrend : [
            {day: "周一", sales: 890000}, {day: "周二", sales: 920000}, 
            {day: "周三", sales: 850000}, {day: "周四", sales: 980000}, 
            {day: "周五", sales: 1200000}, {day: "周六", sales: 1500000}, 
            {day: "周日", sales: 1300000}
        ];
        
        const promotionEffects = data ? data.promotionEffects : [
            {activity: "买二送一", increase: 15}, {activity: "满减活动", increase: 12}, 
            {activity: "会员折扣", increase: 8}, {activity: "限时抢购", increase: 22}
        ];


      const ctx1 = document.getElementById('categoryChart').getContext('2d');
      chartInstances['categoryChart'] = {
          chart: new Chart(ctx1, {
              type: 'doughnut',
              data: {
                  labels: hotCategories.map(item => item.name),
                  datasets: [{
                      data: hotCategories.map(item => item.value),
                      backgroundColor: [
                          '#4CAF50',
                          '#2196F3',
                          '#FFC107',
                          '#FF9800',
                          '#9C27B0'
                      ],
                      borderWidth: 1,
                      borderColor: '#0e2a42'
                  }]
              },
              options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: {
                      legend: {
                          position: 'bottom',
                          labels: {
                              color: '#bbdefb',
                              font: {
                                  size: 14
                              }
                          }
                      }
                  }
              }
          })
      };

      const ctx2 = document.getElementById('trendChart').getContext('2d');
      chartInstances['trendChart'] = {
          chart: new Chart(ctx2, {
              type: 'line',
              data: {
                  labels: weeklyTrend.map(item => item.day),
                  datasets: [{
                      label: '销售额 (¥)',
                      data: weeklyTrend.map(item => item.sales),
                      borderColor: '#4fc3f7',
                      backgroundColor: 'rgba(79, 195, 247, 0.1)',
                      borderWidth: 3,
                      fill: true,
                      tension: 0.3
                  }]
              },
              options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      y: {
                          beginAtZero: true,
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      },
                      x: {
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      }
                  },
                  plugins: {
                      legend: {
                          labels: {
                              color: '#bbdefb',
                              font: {
                                  size: 14
                              }
                          }
                      }
                  }
              }
          })
      };

      const ctx3 = document.getElementById('promotionChart').getContext('2d');
      chartInstances['promotionChart'] = {
          chart: new Chart(ctx3, {
              type: 'bar',
              data: {
                  labels: promotionEffects.map(item => item.activity),
                  datasets: [{
                      label: '销售额提升百分比',
                      data: promotionEffects.map(item => item.increase),
                      backgroundColor: [
                          '#4CAF50',
                          '#2196F3',
                          '#FFC107',
                          '#FF9800'
                      ],
                      borderWidth: 1,
                      borderColor: '#0e2a42'
                  }]
              },
              options: {
                  indexAxis: 'y',
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      x: {
                          beginAtZero: true,
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      },
                      y: {
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      }
                  },
                  plugins: {
                      legend: {
                          display: false
                      }
                  }
              }
          })
      };
    }

    // 初始化会员图表
    function initializeMemberCharts(apiData = null) {
        // 销毁旧图表实例
        destroyChart('memberLevelChart');
        destroyChart('memberTrendChart');
        destroyChart('newMemberChart');
        destroyChart('preferenceChart');

        // 使用API数据或默认数据
        const memberLevels = apiData ? apiData.memberLevels : [
            {level: "普通会员", count: 60}, {level: "银卡会员", count: 25},
            {level: "金卡会员", count: 12}, {level: "钻石会员", count: 3}
        ];
        
        const monthlyTrend = apiData ? apiData.monthlyTrend : [
            {month: "1月", spending: 800000}, {month: "2月", spending: 820000},
            {month: "3月", spending: 850000}, {month: "4月", spending: 880000},
            {month: "5月", spending: 920000}, {month: "6月", spending: 950000},
            {month: "7月", spending: 980000}, {month: "8月", spending: 1020000},
            {month: "9月", spending: 1080000}, {month: "10月", spending: 1120000}
        ];
        
        const conversionRates = apiData ? apiData.conversionRates : [
            {stage: "首购率", rate: 75}, {stage: "二次购买率", rate: 45},
            {stage: "月度留存率", rate: 38}, {stage: "季度留存率", rate: 28},
            {stage: "年度留存率", rate: 18}
        ];
        
        const preferenceAnalysis = apiData ? apiData.preferenceAnalysis : [
            {category: "食品", preference: 92}, {category: "饮料", preference: 85},
            {category: "日用品", preference: 78}, {category: "生鲜", preference: 72},
            {category: "母婴", preference: 65}, {category: "数码", preference: 45}
        ];

      const ctx1 = document.getElementById('memberLevelChart').getContext('2d');
      chartInstances['memberLevelChart'] = {
          chart: new Chart(ctx1, {
              type: 'pie',
              data: {
                  labels: memberLevels.map(item => item.level),
                  datasets: [{
                      data: memberLevels.map(item => item.count),
                      backgroundColor: [
                          '#9E9E9E',
                          '#B0BEC5',
                          '#FFC107',
                          '#FFD700'
                      ],
                      borderWidth: 1,
                      borderColor: '#0e2a42'
                  }]
              },
              options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  plugins: {
                      legend: {
                          position: 'bottom',
                          labels: {
                              color: '#bbdefb',
                              font: {
                                  size: 14
                              }
                          }
                      }
                  }
              }
          })
      };

      const ctx2 = document.getElementById('memberTrendChart').getContext('2d');
      chartInstances['memberTrendChart'] = {
          chart: new Chart(ctx2, {
              type: 'line',
              data: {
                  labels: monthlyTrend.map(item => item.month),
                  datasets: [{
                      label: '会员消费额 (¥)',
                      data: monthlyTrend.map(item => item.spending),
                      borderColor: '#4caf50',
                      backgroundColor: 'rgba(76, 175, 80, 0.1)',
                      borderWidth: 3,
                      fill: true,
                      tension: 0.3
                  }]
              },
              options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      y: {
                          beginAtZero: true,
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      },
                      x: {
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      }
                  },
                  plugins: {
                      legend: {
                          labels: {
                              color: '#bbdefb',
                              font: {
                                  size: 14
                              }
                          }
                      }
                  }
              }
          })
      };

      const ctx3 = document.getElementById('newMemberChart').getContext('2d');
      chartInstances['newMemberChart'] = {
          chart: new Chart(ctx3, {
              type: 'radar',
              data: {
                  labels: conversionRates.map(item => item.stage),
                  datasets: [{
                      label: '转化率',
                      data: conversionRates.map(item => item.rate),
                      backgroundColor: 'rgba(33, 150, 243, 0.2)',
                      borderColor: '#2196F3',
                      pointBackgroundColor: '#2196F3',
                      pointBorderColor: '#fff',
                      pointHoverBackgroundColor: '#fff',
                      pointHoverBorderColor: '#2196F3'
                  }]
              },
              options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      r: {
                          angleLines: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb',
                              backdropColor: 'transparent'
                          },
                          pointLabels: {
                              color: '#bbdefb'
                          }
                      }
                  },
                  plugins: {
                      legend: {
                          labels: {
                              color: '#bbdefb',
                              font: {
                                  size: 14
                              }
                          }
                      }
                  }
              }
          })
      };

      const ctx4 = document.getElementById('preferenceChart').getContext('2d');
      chartInstances['preferenceChart'] = {
          chart: new Chart(ctx4, {
              type: 'bar',
              data: {
                  labels: preferenceAnalysis.map(item => item.category),
                  datasets: [{
                      label: '偏好度指数',
                      data: preferenceAnalysis.map(item => item.preference),
                      backgroundColor: [
                          '#4CAF50',
                          '#2196F3',
                          '#FFC107',
                          '#FF9800',
                          '#E91E63',
                          '#9C27B0'
                      ],
                      borderWidth: 1,
                      borderColor: '#0e2a42'
                  }]
              },
              options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      y: {
                          beginAtZero: true,
                          max: 100,
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      },
                      x: {
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      }
                  },
                  plugins: {
                      legend: {
                          display: false
                      }
                  }
              }
          })
      };
    }

    // 初始化商店图表
    function initializeStoreCharts(apiData = null) {
        // 销毁旧图表实例
        destroyChart('storeRankingChart');
        destroyChart('storeTrafficChart');
        destroyChart('storeEfficiencyChart');
        destroyChart('inventoryTurnoverChart');

        // 使用API数据或默认数据
        const storeRankings = apiData ? apiData.storeRankings : [
            {store: "王府井店", sales: 280000}, {store: "西单店", sales: 250000},
            {store: "国贸店", sales: 230000}, {store: "中关村店", sales: 210000},
            {store: "三里屯店", sales: 190000}
        ];
        
        const storeTraffic = apiData ? apiData.storeTraffic : [
            {store: "王府井店", traffic: 1200}, {store: "西单店", traffic: 1000},
            {store: "国贸店", traffic: 950}, {store: "中关村店", traffic: 880},
            {store: "三里屯店", traffic: 850}
        ];
        
        const storeEfficiency = apiData ? apiData.storeEfficiency : [
            {store: "王府井店", efficiency: 4200}, {store: "西单店", efficiency: 3800},
            {store: "国贸店", efficiency: 3600}, {store: "中关村店", efficiency: 3400},
            {store: "三里屯店", efficiency: 3200}, {store: "朝阳店", efficiency: 2800},
            {store: "海淀店", efficiency: 2900}, {store: "丰台店", efficiency: 2700}
        ];
        
        const inventoryTurnover = apiData ? apiData.inventoryTurnover : [
            {store: "王府井店", turnover: 8.5, sales: 280},
            {store: "西单店", turnover: 7.8, sales: 250},
            {store: "国贸店", turnover: 8.2, sales: 230},
            {store: "中关村店", turnover: 7.5, sales: 210},
            {store: "三里屯店", turnover: 7.0, sales: 190},
            {store: "朝阳店", turnover: 5.2, sales: 180},
            {store: "海淀店", turnover: 5.5, sales: 170},
            {store: "丰台店", turnover: 4.8, sales: 160}
        ];

      const ctx1 = document.getElementById('storeRankingChart').getContext('2d');
      chartInstances['storeRankingChart'] = {
          chart: new Chart(ctx1, {
              type: 'bar',
              data: {
                  labels: storeRankings.map(item => item.store),
                  datasets: [{
                      label: '销售额 (¥)',
                      data: storeRankings.map(item => item.sales),
                      backgroundColor: [
                          '#4CAF50',
                          '#2196F3',
                          '#FFC107',
                          '#FF9800',
                          '#E91E63'
                      ],
                      borderWidth: 1,
                      borderColor: '#0e2a42'
                  }]
              },
              options: {
                  indexAxis: 'y',
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      x: {
                          beginAtZero: true,
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      },
                      y: {
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      }
                  },
                  plugins: {
                      legend: {
                          display: false
                      }
                  }
              }
          })
      };

      const ctx2 = document.getElementById('storeTrafficChart').getContext('2d');
      chartInstances['storeTrafficChart'] = {
          chart: new Chart(ctx2, {
              type: 'bar',
              data: {
                  labels: storeTraffic.map(item => item.store),
                  datasets: [{
                      label: '客流量',
                      data: storeTraffic.map(item => item.traffic),
                      backgroundColor: [
                          '#4CAF50',
                          '#2196F3',
                          '#FFC107',
                          '#FF9800',
                          '#E91E63'
                      ],
                      borderWidth: 1,
                      borderColor: '#0e2a42'
                  }]
              },
              options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      y: {
                          beginAtZero: true,
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      },
                      x: {
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      }
                  },
                  plugins: {
                      legend: {
                          display: false
                      }
                  }
              }
          })
      };

      const ctx3 = document.getElementById('storeEfficiencyChart').getContext('2d');
      chartInstances['storeEfficiencyChart'] = {
          chart: new Chart(ctx3, {
              type: 'line',
              data: {
                  labels: storeEfficiency.map(item => item.store),
                  datasets: [{
                      label: '坪效 (¥/㎡)',
                      data: storeEfficiency.map(item => item.efficiency),
                      borderColor: '#FFC107',
                      backgroundColor: 'rgba(255, 193, 7, 0.1)',
                      borderWidth: 3,
                      fill: true,
                      tension: 0.3
                  }]
              },
              options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      y: {
                          beginAtZero: true,
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      },
                      x: {
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      }
                  },
                  plugins: {
                      legend: {
                          labels: {
                              color: '#bbdefb',
                              font: {
                                  size: 14
                              }
                          }
                      }
                  }
              }
          })
      };

      const ctx4 = document.getElementById('inventoryTurnoverChart').getContext('2d');
      chartInstances['inventoryTurnoverChart'] = {
          chart: new Chart(ctx4, {
              type: 'scatter',
              data: {
                  datasets: [{
                      label: '库存周转率 vs 销售额',
                      data:  inventoryTurnover.map(item => ({
                      x: item.turnover,
                      y: item.sales
                  })),
                      backgroundColor: 'rgba(156, 39, 176, 0.6)',
                      borderColor: 'rgba(156, 39, 176, 1)',
                      borderWidth: 1
                  }]
              },
              options: {
                  responsive: true,
                  maintainAspectRatio: false,
                  scales: {
                      x: {
                          title: {
                              display: true,
                              text: '库存周转率 (次/年)',
                              color: '#bbdefb'
                          },
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      },
                      y: {
                          title: {
                              display: true,
                              text: '日均销售额 (千¥)',
                              color: '#bbdefb'
                          },
                          beginAtZero: true,
                          grid: {
                              color: 'rgba(178, 204, 230, 0.1)'
                          },
                          ticks: {
                              color: '#bbdefb'
                          }
                      }
                  },
                  plugins: {
                      legend: {
                          labels: {
                              color: '#bbdefb',
                              font: {
                                  size: 14
                              }
                          }
                      }
                  }
              }
          })
      };
    }

    // 初始化默认图表 (销售)
window.addEventListener('load', function() {
    // 初始化销售分析图表（使用默认数据，避免空白）
    initializeSalesCharts();
    
    // 然后加载真实数据
    loadTabData('sales');
});</script>
</body>
</html>



